<template>
  <div class="course-header">
    <!-- 分类 -->
    <el-row class="course-filtrate" type="flex" align="top">
      <div class="title">分类：</div>
      <div class="category-head">
        <edu-category @patch="handleCategory" :list="categoryList"></edu-category>
      </div>
    </el-row>

    <!-- 排序 -->
    <el-row class="course-filtrate" type="flex" align="middle">
      <div class="title">{{ sorting.name }}</div>
      <div
        class="item"
        v-for="(item, index) in sorting.data"
        :key="index"
        :class="{ active: item.selected }"
        @click="handerSorting(item, sorting)"
      >
        {{ item.name }}
      </div>
    </el-row>
    <!-- 筛选 -->
    <el-row class="course-filtrate" type="flex" align="middle">
      <div class="title">{{ screening.name }}</div>
      <div
        class="item"
        v-for="(item, index) in screening.data"
        :key="index"
        :class="{ active: item.selected }"
        @click="handerScreening(item, screening)"
      >
        {{ item.name }}
      </div>
      <div class="item" :class="{ active: price != '' }" @click="handerPrice">
        <el-row type="flex" align="middle">
          价格
          <div class="price">
            <i
              class="price-icon el-icon-sort-up"
              :class="{
                active: price == 'priceUp',
                weaken: price == 'priceDown'
              }"
            ></i>
            <i
              class="price-icon el-icon-sort-down"
              :class="{
                active: price == 'priceDown',
                weaken: price == 'priceUp'
              }"
            ></i>
          </div>
        </el-row>
      </div>
      <el-row class="item" type="flex" align="middle">
        价格区间
        <el-row class="inter" type="flex" align="middle">
          <el-input
            size="mini"
            v-model="priceBefore"
            placeholder="100"
            @change="handerPriceInterval"
          ></el-input>
          <el-divider></el-divider>
          <el-input
            size="mini"
            v-model="priceAfter"
            placeholder="200"
            @change="handerPriceInterval"
          ></el-input>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import EduCategory from '@/components/EduCategory'
export default {
  components: {
    EduCategory
  },
  props: {
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      sorting: {
        name: '排序：',
        value: 'sorting',
        data: [
          {
            name: '综合排序',
            value: 'default',
            selected: false
          },
          {
            name: '推荐',
            value: 'splendid',
            selected: false
          },
          {
            name: '畅销',
            value: 'popular',
            selected: false
          },
          {
            name: '最新',
            value: 'latest',
            selected: false
          }
        ]
      },
      screening: {
        name: '筛选：',
        value: 'screening',
        data: [
          {
            name: '免费',
            value: 'free',
            selected: false
          },
          {
            name: '可试听',
            value: 'audition',
            selected: false
          },
          {
            name: 'VIP',
            value: 'vip',
            selected: false
          },
          {
            name: '活动',
            value: 'event',
            selected: false
          }
        ]
      },
      price: '',
      priceBefore: '',
      priceAfter: '',
      categoryList: []
    }
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        if (!n.query.order) {
          this.sorting.data.forEach(function(item) {
            item.selected = false
          })
        }
        if (!n.query.param) {
          this.screening.data.forEach(function(val) {
            val.selected = false
          })
        }
      }
    }
  },
  methods: {
    handerParams() {
      this.$emit('theParams', this.params)
    },
    // 排序
    handerSorting(item, data) {
      let that = this
      data.data.forEach(function(val) {
        val.selected = false
      })
      item.selected = true
      that.params.order = item.value
      that.handerParams()
    },
    // 筛选
    handerScreening(item, data) {
      data.data.forEach(function(val) {
        val.selected = false
      })
      if (!item.selected) {
        this.params.param = item.value
        this.handerParams()
      }
      item.selected = !item.selected
    },
    // 价格升降排序
    handerPrice() {
      // 因为都是用order，要排序selected
      this.sorting.data.forEach(function(item) {
        item.selected = false
      })
      if (this.price == 'priceUp') {
        this.price = 'priceDown'
      } else {
        this.price = 'priceUp'
      }
      this.params.order = this.price
      this.handerParams()
    },
    // 价格区间
    handerPriceInterval() {
      this.priceBefore = this.priceBefore.replace(/[^\d]/g, '')
      this.priceAfter = this.priceAfter.replace(/[^\d]/g, '')
      this.params.price_min = this.priceBefore
      this.params.price_max = this.priceAfter
      if (this.priceBefore == '' && this.priceAfter == '') {
        // 如果最小与最大都为空显示全部价格区间
        this.handerParams()
      } else if (this.priceBefore == '' || this.priceAfter == '') {
        // 最小或者最大任意一个为空不执行
        console.log('请输入100~999数字')
      } else {
        // 都满足请求区间
        this.handerParams()
      }
    },
    // 获取分类数据
    getCategoryInfo() {
      this.$api.getCategory(
        {
          type: 0
        },
        res => {
          const data = res.data
          this.categoryList = data
        }
      )
    },
    // 分类筛选
    handleCategory(val) {
      this.$router.push({
        path: this.$route.fullPath,
        query: {
          category: val
        }
      })
    }
  },
  created() {
    this.getCategoryInfo()
  }
}
</script>

<style lang="scss" scoped>
.course-header {
  // 筛选
  .course-filtrate {
    .category-head {
      flex: 1 1 auto;
    }
    .title {
      margin-right: 10px;
      font-size: 14px;
      font-weight: 400;
      white-space: nowrap;
      color: $text-color-auxiliary;
    }
    .item + .item {
      margin-left: 40px;
    }
    .item {
      font-size: 13px;
      font-weight: 400;
      color: $text-color-import;
      cursor: pointer;
      &.active {
        @include edu-color-auxiliary;
      }
      .inter {
        margin-left: 8px;
        ::v-deep .el-input__inner {
          width: 70px;
          height: 22px;
          line-height: 22px;
          padding: 0 5px;
          border-radius: 0;
        }
        .el-divider {
          width: 12px;
          margin: 0 6px;
        }
      }
      .price {
        position: relative;
        width: 20px;
        height: 13px;
        &-icon {
          position: absolute;
          top: 0;
          &.active {
            @include edu-color-auxiliary;
          }
          &.weaken {
            color: #b7bac1;
          }
          &.el-icon-sort-up {
            right: 0;
          }
          &.el-icon-sort-down {
            left: 0;
          }
        }
      }
    }
  }
  .course-filtrate:last-child {
    margin-top: 20px;
  }
  .course-filtrate:first-child .title {
    padding: 6px 0;
    line-height: 1;
  }
}
</style>
